<template>
  <!-- 告警通知 -->
  <div class="warningInformation comflex">
    <div class="warnTable warn">
      <div class="title"> 告警消息通知 </div>
      <div class="content table" v-if="warnList.length">
        <div class="warnList">
          <div class="warnItem" v-for="(item, index) in warnList" :key="index">
            <div class="warnInfo"><i class="el-icon-timer">{{ item.fishPondName + item.messageInfo }}</i></div>
            <div class="warnTime"><span>{{ item.happenTime }}</span>
            <span class="showWarn" @click="showWarn(item)">查看告警</span></div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="totalPages">
          </el-pagination>
        </div>
      </div>
      <div style="width: 100%;text-align: center;line-height: 100px;" v-else>
        暂无告警数据！
      </div>
    </div>
    <div class="warnTable line">
      <div class="title"> 近30天告警情况分析 </div>
      <div class="content">
        <div class="chooseItem comflex item-center">
          <div class="item comflex item-center">
            <div>总告警次数:<span> {{ alarmMessageObj.totalNum ? alarmMessageObj.totalNum : 0 }}</span></div>
          </div>
          <div class="item comflex item-center">
            <div>已处理告警:<span> {{ alarmMessageObj.handleNum ? alarmMessageObj.handleNum : 0 }}</span></div>
          </div>
          <div class="item comflex item-center">
            <div>待处理告警:<span> {{ alarmMessageObj.unHandleNum ? alarmMessageObj.unHandleNum : 0 }}</span></div>
          </div>
        </div>
        <EChartsLine :cdata="option" :nowheight="'calc(100% - 50px)'" :nowwidth="'100%'" />
      </div>
    </div>
    <el-dialog title="告警信息" :visible.sync="dialogVisible" width="90%">
      <el-table :data="batchInfo"  border>
        <el-table-column prop="fishPondName" label="鱼塘名称">
        </el-table-column>
        <el-table-column prop="messageInfo" label="告警信息">
        </el-table-column>
        <el-table-column prop="dataItemName" label="告警数据项">
        </el-table-column>
        <el-table-column prop="alarmPresetValue" label="预设告警值">
        </el-table-column>
        <el-table-column prop="happenTime" label="发生时间">
        </el-table-column>
        <el-table-column prop="dataTypeName" label="告警类型">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <p>{{ scope.row.disposeStatus ? '异常' : '正常' }}</p>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mymixin } from "@/utils/mixins";
import EChartsLine from "@/components/Echarts/components/linechart/chart.vue";
import warnApi from "@/api/monitoring-alarm/historical-alarm-record/index";
import alarmMessageApi from "@/api/monitoring-alarm/alarm-alarmMessage/index";

export default {
  name: "baseformation",
  props: {},
  components: { EChartsLine },
  mixins: [mymixin],
  data () {
    return {
      totalPages: 0,
      pageNum: 1,
      dialogVisible: false,
      tableData: {},
      warnList: [],
      batchInfo: [],
      alarmMessageObj: {},
      option: {
        xAxisdata: [],
        xAxis: {
          type: "category",
        },
        seriesData: [
          {
            name: '告警数：',
            type: "line",
            data: [],
          }
        ],
      }
    }
  },
  watch: {},
  created () { },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.queryWarnList()//查询告警列表
      this.getRecentlyAlarmAnalyse() //获取30天告警数据
    },
    showDialogVisible () {
      this.dialogVisible = true
    },
    getRecentlyAlarmAnalyse () {
      let mapData = {}
      alarmMessageApi.getRecentlyAlarmAnalyse({}).then(res => {
        if (res.data && res.success) {
          this.alarmMessageObj = res.data ? res.data : {}
          mapData = this.alarmMessageObj.map ? this.alarmMessageObj.map : {}
          if (res.success && mapData) {
            this.option.xAxisdata = []
            for (let key in mapData) {
              this.option.xAxisdata.push(key)
              this.option.seriesData[0]['data'].push(mapData[key])
            }
          } else {
            this.alarmMessageObj.map = {}
          }
        } else {
          this.alarmMessageObj = {}
        }
        console.log(res)
      })
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.queryWarnList();
    },
    //查询告警列表
    queryWarnList () {
      let params = {
        page: this.pageNum,
        size: 10,
        entity: {
          disposeStatus: false
        }
      };
      warnApi.queryPageList(params, false).then(res => {
        if (res.success && res.data) {
          this.warnList = res.data.content ? res.data.content : []
          this.totalPages = res.data.totalPages ? res.data.totalPages * 10 : 1
        } else {
          this.warnList = []
        }
        console.log(this.warnList)
      });
    },
    //查看告警
    showWarn (data) {
      this.dialogVisible = true
      this.tableData = data
      this.batchInfo = [data]
    },
  }
};
</script>
<style scoped lang="scss">
.comflex {
  display: flex;
  justify-content: flex-start;
}

.item-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.warningInformation {
  width: 100%;
  margin: 15px 0;
  border-radius: 10px;
  justify-content: space-between;

  .warn {
    width: calc(35% - 25px);
  }

  .line {
    width: calc(65% + 5px);
  }

  .warnTable {
    box-shadow: 1px 1px 50px 10px #eaeaea;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
  }

  .title {
    width: 100%;
    height: 50px;
    padding-left: 20px;
    border-radius: 10px 10px 0 0;
    background-image: linear-gradient(45deg, #03a9f4, #58caff);
    font-size: 16px;
    line-height: 50px;
    color: #ffffff;
  }

  .content {
    padding: 15px;
    flex-wrap: wrap;
    height: 300px;
    overflow-y: hidden;

    .chooseItem {
      height: 50px;
      justify-content: flex-start;

      .item {
        color: #666666;
        padding: 0 20px;
        cursor: pointer;

        span {
          color: #03a9f4;
        }
      }
    }

    .table {
      width: 100%;
      padding: 20px;
    }

    .warnList {
      height: calc(100% - 40px);
      margin-bottom: 10px;
      overflow-x: hidden;
    }

    .pagination {
      text-align: center;
    }

    .warnItem {
      width: 100%;
      padding: 10px 10px;
      border-bottom: 1px solid #e9e9e9;
      color: #999999;
      cursor: pointer;
      transition: all 0.2s;
      
      .warnTime{
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .warnInfo{
        display: inline-block;
        line-height: 30px;
      }
      .showWarn {
        color: red;
      }
    }

    .warnItem:nth-child(even) {
      background: #ffffff;
    }

    .warnItem:hover {
      background: #dfdfdf;
      color: #333333;

      .warnInfo {
      color: #333333;
      }
    }
  }
}
::v-deep .el-dialog__wrapper .el-dialog{
  margin-top: 15vh !important;
}
</style>
